<template>
  <!-- :style="`height: ${px2rpx(screenHeight) - 53}rpx`" -->
  <view 
    class="page-content"
  >
    <Education
      ref="refForm"
      v-if="expType.EDUCATION === currExpType"
      :form="formModal"
    />
    <Work ref="refForm" v-if="expType.WORK === currExpType" :form="formModal" />
    <Research
      ref="refForm"
      v-if="expType.RESEARCH === currExpType"
      :form="formModal"
    />
    <Treatment
      ref="refForm"
      v-if="expType.TREATMENT === currExpType"
      :form="formModal"
    />
    <Train
      ref="refForm"
      v-if="expType.TRAIN === currExpType"
      :form="formModal"
    />
    <Additional
      ref="refForm"
      v-if="expType.ADDITIONAL === currExpType"
      :form="formModal"
    />
    <Qualifications
      ref="refForm"
      v-if="expType.NVQ === currExpType"
      :form="formModal"
    />
  </view>
  <view class="btn-box">
    <u-button shape="circle" type="primary" plain @click="submit"
      >保存</u-button
    >
  </view>
</template>
<script lang="ts" setup>
import { useUserStoreWidthOut } from '@/stores/user';
import { expType } from '../data';
import Education from './components/education.vue';
import Work from './components/work.vue';
import Research from './components/research.vue';
import Treatment from './components/treatment.vue';
import Train from './components/train.vue';
import Additional from './components/additional.vue';
import Qualifications from './components/qualifications.vue';
import { nextTick } from 'vue';
import {
  saveUserExperience,
  updateUserExperience,
  getUserExperienceByExpId,
} from '@/api/modules/user';
import { onLoad } from '@dcloudio/uni-app';
import { cellClick } from '@/hooks/useBack';

const asyncUser = useUserStoreWidthOut();
const userInfo: any = asyncUser.getUserInfo;

const refForm = ref();
const submit = async () => {
  const data = await refForm.value.getData();
  if (data) {
    data.userId = userInfo.userId;
    data.expType = currExpType.value;
    if (actionType.value === 'add') {
      saveUserExperience(data)
        .then(() => {
          cellClick();
        })
        .catch(() => {});
    } else {
      updateUserExperience(data)
        .then(() => {
          cellClick();
        })
        .catch(() => {});
    }
  }
};

const currExpType = ref<number>(0);
const currTitle = ref<string>('');
const actionType = ref<string>('');
const formModal = ref<any>();
onLoad(() => {
  const {
    expType,
    title,
    actionType: type,
    expId,
  } = (uni as any).$Router.getQuery();
  currExpType.value = expType;
  currTitle.value = title;
  actionType.value = type;
  if (expId) {
    getUserExperienceByExpId({ expId }).then((res) => {
      formModal.value = res;
      formModal.value.stagesList = formModal.value.stagesIds
        ? formModal.value.stagesIds.split(',')
        : [];
      formModal.value.roleList = formModal.value.roleIds
        ? formModal.value.roleIds.split(',')
        : [];
      if (formModal.value.fileList && formModal.value.fileList.length) {
        formModal.value.fileList.forEach((item: any) => {
          item.uid = item.platformFileId;
          item.name = item.fileName;
        });
      } else {
        formModal.value.fileList = [];
      }
      formModal.value.mainFlagName =
        formModal.value.mainFlag === 1 ? '是' : '否';
    });
  }
  uni.setNavigationBarTitle({
    title,
  });
});
</script>
<style lang="scss">
.page-content {
  padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
  width: 100%;
  height: 100%;
}
.btn-box {
  bottom: 0;
  width: 100%;
  background-color: #fff;
  padding: 20rpx;
  padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
  position: fixed;
  // bottom: 0;
  z-index: 10;
}
.head-box {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .title {
    font-weight: bold;
  }
}
.center-box {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>
